<template>
    <div>
        <el-row style="height: 50px;">

            <el-col :span="4" style="margin: 10px 20px">
                <el-input v-model="page.search" placeholder="API名称/请求链接/API介绍"></el-input>

            </el-col>
            <el-col :span="4" style="margin: 10px auto">
                <el-select v-model="page.enabled" placeholder="启用/禁用">
                    <el-option label="选择启用/禁用" value=""></el-option>
                    <el-option label="启用" value="1"></el-option>
                    <el-option label="禁用" value="0"></el-option>
                </el-select>
            </el-col>
            <el-col :span="2" style="margin: 10px auto">
                <el-button type="primary" @click="initTableDate">搜索</el-button>
            </el-col>

            <el-col :span="8" style="margin: 10px auto">
                <el-button type="success" @click="goAddApiRouter">添加API</el-button>
                <el-popconfirm title="确定删除选中项目吗？" style="margin: 10px 5px" @onConfirm="deleteSelectedClick">
                    <el-button type="danger" slot="reference">删除选中</el-button>
                </el-popconfirm>
                <el-popconfirm title="确定启用选中项目吗？" style="margin: 10px 5px" @onConfirm="enabledSelectedClick">
                    <el-button type="primary" slot="reference">启用选中</el-button>
                </el-popconfirm>
                <el-popconfirm title="确定禁用选中项目吗？" style="margin: 10px 5px" @onConfirm="disabledSelectedClick">
                    <el-button type="warning" slot="reference">禁用选中</el-button>
                </el-popconfirm>

            </el-col>

        </el-row>
        <el-table :data="tableData" v-loading="loading" border style="width: 100%"
            @selection-change="handleSelectionChange">
            <el-table-column type="index" width="50">
            </el-table-column>
            <el-table-column type="selection" width="55">
            </el-table-column>
            <el-table-column fixed prop="id" label="ID" width="50" v-if="false">
            </el-table-column>
            <el-table-column prop="title" label="API名称" width="150">
            </el-table-column>
            <el-table-column prop="url" label="请求链接" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="description" label="API介绍" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="method" label="请求方式">
                <template slot-scope="scope">
                    <el-tag :type="checkMethodTagsType(scope.row.method)">{{ scope.row.method }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="requestHeads" label="请求头" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="requestBodyType" label="请求格式">
                <template slot-scope="scope">
                    <el-tag :type="checkMethodTagsType(scope.row.requestBodyType)">{{
                        scope.row.requestBodyType == 'ParamsSubmit' ? '参数提交' : 'JSON提交' }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="requestParams" label="请求参数" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="responseFormart" label="响应格式">
                <template slot-scope="scope">
                    <el-tag type="warning">{{ scope.row.responseFormart }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="responseDemo" label="响应模板" :show-overflow-tooltip="true">
            </el-table-column>
            <el-table-column prop="enabled" label="启用/禁用">
                <template slot-scope="scope">
                    <el-switch :value="scope.row.enabled" active-color="#13ce66" inactive-color="#ff4949" active-value=1
                        inactive-value=0 active-text="启用" inactive-text="禁用" @change="test(scope.row)">
                    </el-switch>
                    <!-- <el-tag :type="checkMethodTagsType(scope.row.enabled)">{{ scope.row.enabled == 1 ? '启用' : '禁用'
                        }}</el-tag> -->
                </template>
            </el-table-column>
            <el-table-column fixed="right" label="操作">
                <template slot-scope="scope">
                    <el-button @click="handleClick(scope.row)" type="text" size="small">查看</el-button>
                    <el-button type="text" size="small" @click="updateClick(scope.row.id)">修改</el-button>
                    <el-popconfirm title="确定删除选中项目吗？" style="margin: 10px 5px" @onConfirm="deleteClick(scope.row.id)">
                        <el-button type="text" slot="reference" size="small">删除</el-button>
                    </el-popconfirm>

                </template>
            </el-table-column>
        </el-table>
        <div class="pageClass">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                :current-page.sync="page.currentPage" :page-sizes="page.pageSizeList" :page-size="page.size"
                layout=" total,prev, pager, next,sizes" :total="page.total">
            </el-pagination>
        </div>
    </div>

</template>

<script>

import { getApiInfoList, getApiInfoListByPage, deleteAPIByIds, enabledApiByIds, disabledApiByIds } from "@/api/api-manager/list/list";

export default {
    data() {
        return {
            // 表格数据
            tableData: [],
            // 选中ID
            selectedId: [],
            // 数据加载
            loading: false,
            // 分页相关
            page: {
                total: null, // 数据总条数
                pageSizeList: [5, 10, 15, 20], // 数据多少条每页列表
                size: 10,// 每页数据多少条
                currentPage: 1, // 当前页码
                search: null, //搜索\
                enabled: ''
            }
        }
    },
    methods: {
        // 去添加一个API
        goAddApiRouter() {
            this.$router.push({ name: 'addApi' });
        },
        // 查看
        handleClick(row) {
            // console.log(row);
            // this.$router.push({ name: 'doc', params: { index: row.id } });
            // 获取要打开路由的信息
            const routeData = this.$router.resolve({ name: 'doc', params: { index: row.id } });

            // 在新窗口中打开路由
            window.open(routeData.href, '_blank');
        },
        // 单条删除
        deleteClick(id) {
            deleteAPIByIds([id]).then(response => {
                const { message } = response
                this.$message.success(message)
                this.initTableDate();
            }).catch(error => {
                this.$message.error(error)
            })
        },
        updateClick(id) {
            this.$router.push({ name: 'updateApi', params: { index: id } });
            console.log(id);
        },
        // 删除选中
        deleteSelectedClick() {
            if (!this.checkSelectedNum()) {
                // 未选中数据
                return;
            }
            deleteAPIByIds(this.selectedId).then(response => {
                const { message } = response
                this.$message.success(message)
                this.initTableDate();
            }).catch(error => {
                this.$message.error(error)
            })

        },
        // 启用选中
        enabledSelectedClick() {
            if (!this.checkSelectedNum()) {
                // 未选中数据
                return;
            }
            enabledApiByIds(this.selectedId).then(response => {
                const { message } = response
                this.$message.success(message)
                this.initTableDate();
            }).catch(error => {
                this.$message.error(error)
            })

        },
        // 禁用选中
        disabledSelectedClick() {
            if (!this.checkSelectedNum()) {
                // 未选中数据
                return;
            }
            disabledApiByIds(this.selectedId).then(response => {
                const { message } = response
                this.$message.success(message)
                this.initTableDate();
            }).catch(error => {
                this.$message.error(error)
            })

        },
        // 取列表数据
        initTableDate() {
            this.loading = true
            getApiInfoListByPage(this.page).then(response => {
                const { data } = response
                console.log(response);
                console.log(data);
                this.tableData = data.list
                this.page.total = data.total
                this.page.size = data.size
                this.page.currentPage = data.currentPage
                this.page.search = data.search
                this.loading = false
            }).catch(error => {
                this.loading = false
                this.$message.error("查询列表失败")
            })
        },
        // 判断方法给Tags类型
        checkMethodTagsType(value) {
            switch (value) {
                case 'GET':
                    return '';
                case 'POST':
                    return 'success';
                case 'PUT':
                    return 'info';
                case 'DELETE':
                    return 'danger';
                case 'UPDATE':
                    return 'warning';
                case 'ParamsSubmit':
                    return '';
                case 'JsonSubmit':
                    return 'success';
                case '1':
                    return 'success';
                case '0':
                    return 'danger';
                case 'UPDATE':
                    return 'warning';

                default:
                    return '';
            }
        },
        // 每页显示数据更换
        handleSizeChange(val) {
            this.page.size = val
            this.initTableDate()
        },
        // 当前页码切换
        handleCurrentChange(val) {
            this.initTableDate()
        },
        // 选中事件
        handleSelectionChange(array) {
            this.selectedId = []
            for (let i = 0; i < array.length; i++) {
                const element = array[i];
                this.selectedId.push(element.id)
            }
            console.log(this.selectedId);
        },
        // 判断至少选中一条数据
        checkSelectedNum() {
            if (this.selectedId.length <= 0) {
                this.$message.error("至少选中一条数据")
                return false;
            }
            return true;
        },
        // 启用禁用
        test(row) {
            const status = row.enabled == 0 ? 1 : 0
            if (status == 0) {
                disabledApiByIds([row.id]).then(response => {
                    const { message } = response
                    this.$message.success(message)
                    this.initTableDate();
                }).catch(error => {
                    this.$message.error(error)
                })
            } else {
                enabledApiByIds([row.id]).then(response => {
                    const { message } = response
                    this.$message.success(message)
                    this.initTableDate();
                }).catch(error => {
                    this.$message.error(error)
                })
            }
        }
    },
    created() {
        // 取列表数据
        this.initTableDate();
    },
    mounted() {
        if (this.$route.params.message) {
            this.$message.success(this.$route.params.message);
        }
    }
}
</script>

<style>
.el-tooltip__popper {
    font-size: 14px;
    max-width: 40%
}

.pageClass {
    text-align: center;
}

/* 设置显示隐藏部分内容，按40%显示 */
</style>